<template>
  <div id="line">
    <van-nav-bar title="复康日志曲线" left-text="返回" left-arrow @click-left="back" fixed placeholder/>
    <div class="main">
      <div class="innutrition">
        <div class="chart">
          <div class="wlzs">
            <div class="title">
              <div>体重走势图</div>
              <div class="rightBtn">
                <ul id="disease" @click="disease($event)">
                  <li class="active" data-val="15">15天</li>
                  <li data-val="30">30天</li>
                  <li data-val="60">60天</li>
                  <li data-val="90">90天</li>
                </ul>
              </div>
            </div>
            <canvas id="wlzs-chart" class="canvas"></canvas>
          </div>
        </div>
         <div class="chart">
          <div class="wlzs">
            <div class="title">
              <div>骨骼肌走势图</div>
              <div class="rightBtn">
                <ul id="ggj" @click="ggj($event)">
                  <li class="active" data-val="15">15天</li>
                  <li data-val="30">30天</li>
                  <li data-val="60">60天</li>
                  <li data-val="90">90天</li>
                </ul>
              </div>
            </div>
            <canvas id="ggj-chart" class="canvas"></canvas>
          </div>
        </div>
         <div class="chart">
          <div class="wlzs">
            <div class="title">
              <div>饮食评分走势图</div>
              <div class="rightBtn">
                <ul id="yspf" @click="yspf($event)">
                  <li class="active" data-val="15">15天</li>
                  <li data-val="30">30天</li>
                  <li data-val="60">60天</li>
                  <li data-val="90">90天</li>
                </ul>
              </div>
            </div>
            <canvas id="yspf-chart" class="canvas"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const F2 = require("@antv/f2/lib/index");
import { getHealthLogLine } from "@/apis/journal";
export default {
  data() {
    return {
      pid:null,
      lineData: []
    };
  },
  methods: {
    back() {
      this.$router.go(-1); //返回上一层
    },
    getLogLine() {
      getHealthLogLine({hzid:this.pid,day:15})
        .then(res => {
          if(res.codes == 200){
            this.lineData =  res.data.tizhong 
            this.gugeji = res.data.gugeji
            this.pingfen = res.data.pingfen
            this.onloadchart();
            this.ggjchart()
            this.yspfchart()
          }else{
            if(res.codes){
              this.$toast("网络错误");
            }else{
              this.$toast(res.msg);
            }
          }
        })
        .catch(err => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
    },
    
    onloadchart() {
      console.log(this.lineData);
      var chart = new F2.Chart({
        id: "wlzs-chart",
        pixelRatio: window.devicePixelRatio
      });
      var defs = {
        time: {
          type: 'timeCat',
          mask: "MM/DD",
          tickCount: 5,
          range: [0, 1]
        },
        number: {
          type: "linear",
          tickCount: 5,
          alias: '体重'
          // ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          // alias: "体重走势"
        }
      };
      chart.source(this.lineData, defs);
      chart.axis("time", {
        label: function label(text, index, total) {
          var textCfg = {};
          if (index === 0) {
            textCfg.textAlign = "left";
          } else if (index === total - 1) {
            textCfg.textAlign = "right";
          }
          return textCfg;
        }
      });
      chart.axis("number", {
        position: "left"
      });
      chart.tooltip({
        alwaysShow: false,
        offsetY: 0,
        offsetX: 0,
        showTitle: false,
        triggerOn: "touchstart",
        triggerOff: "touchend",
        showCrosshairs: true,
        showTooltipMarker: true,
      });
      chart
        .line()
        .position("time*number")
        .shape("smooth");
      chart
        .point()
        .position("time*number")
        .shape("smooth")
        .style({
          stroke: "#fff",
          lineWidth: 1
        });
      chart.render();
      // window.onresize = chart.resize;
    },
    ggjchart() {
      console.log(this.gugeji);
      var chart = new F2.Chart({
        id: "ggj-chart",
        pixelRatio: window.devicePixelRatio
      });
      var defs = {
        time: {
          type: 'timeCat',
          mask: "MM/DD",
          tickCount: 5,
          range: [0, 1]
        },
        number: {
          type: "linear",
          tickCount: 5,
          alias: '骨骼肌'
          // ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          // alias: "体重走势"
        }
      };
      chart.source(this.gugeji, defs);
      chart.axis("time", {
        label: function label(text, index, total) {
          var textCfg = {};
          if (index === 0) {
            textCfg.textAlign = "left";
          } else if (index === total - 1) {
            textCfg.textAlign = "right";
          }
          return textCfg;
        }
      });
      chart.axis("number", {
        position: "left"
      });
      chart.tooltip({
        alwaysShow: false,
        offsetY: 0,
        offsetX: 0,
        showTitle: false,
        triggerOn: "touchstart",
        triggerOff: "touchend",
        showCrosshairs: true,
        showTooltipMarker: true
      });
      chart
        .line()
        .position("time*number")
        .shape("smooth");
      chart
        .point()
        .position("time*number")
        .shape("smooth")
        .style({
          stroke: "#fff",
          lineWidth: 1
        });
      chart.render();
      // window.onresize = chart.resize;
    },
     yspfchart() {
      console.log(this.lineData);
      var chart = new F2.Chart({
        id: "yspf-chart",
        pixelRatio: window.devicePixelRatio
      });
      var defs = {
        time: {
          type: 'timeCat',
          mask: "MM/DD",
          tickCount: 7,
          range: [0, 1]
        },
        number: {
          type: "linear",
          tickCount: 5,
          alias: '饮食评分'
          // ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
          // alias: "体重走势"
        }
      };
      chart.source(this.pingfen, defs);
      chart.axis("time", {
        label: function label(text, index, total) {
          var textCfg = {};
          if (index === 0) {
            textCfg.textAlign = "left";
          } else if (index === total - 1) {
            textCfg.textAlign = "right";
          }
          return textCfg;
        }
      });
      chart.axis("number", {
        position: "left"
      });
      chart.tooltip({
        alwaysShow: false,
        offsetY: 0,
        offsetX: 0,
        showTitle: false,
        triggerOn: "touchstart",
        triggerOff: "touchend",
        showCrosshairs: true,
        showTooltipMarker: true
      });
      chart
        .line()
        .position("time*number")
        .shape("smooth");
      chart
        .point()
        .position("time*number")
        .shape("smooth")
        .style({
          stroke: "#fff",
          lineWidth: 1
        });
      chart.render();
      // window.onresize = chart.resize;
    },
    // 按钮事件处理
    disease(el) {
      if (el.target.localName !== "ul") {
        let doc = document.querySelector("#disease");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        console.log(el.target.getAttribute('data-val'))
        getHealthLogLine({hzid:this.pid,day:Number(el.target.getAttribute('data-val'))})
        .then(res => {
          if(res.codes == 200){
            this.lineData = res.data.tizhong;
            console.log(res);
            this.onloadchart();
          }else{
            if(res.codes){
              this.$toast("网络错误");
            }else{
              this.$toast(res.msg);
            }
          }
        })
        .catch(err => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
      }
    },
    ggj(el) {
      if (el.target.localName !== "ul") {
        let doc = document.querySelector("#ggj");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
            
          }
        }
        el.target.setAttribute("class", "active");
         getHealthLogLine({hzid:this.pid,day:Number(el.target.getAttribute('data-val'))})
        .then(res => {
          if(res.codes == 200){
            // this.lineData = res.data.tizhong;
            this.gugeji = res.data.gugeji
            console.log(res);
            this.ggjchart()
          }else{
            if(res.codes){
              this.$toast("网络错误");
            }else{
              this.$toast(res.msg);
            }
          }
        })
        .catch(err => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
      }
    },
    yspf(el) {
      if (el.target.localName !== "ul") {
        let doc = document.querySelector("#yspf");
        for (let i = 0; i < doc.children.length; i++) {
          if (doc.children[i].className) {
            doc.children[i].setAttribute("class", "");
          }
        }
        el.target.setAttribute("class", "active");
        getHealthLogLine({hzid:this.pid,day:Number(el.target.getAttribute('data-val'))})
        .then(res => {
          if(res.codes == 200){
            // this.lineData = res.data.tizhong;
             this.pingfen = res.data.pingfen
            console.log(res);
            this.yspfchart()
          }else{
            if(res.codes){
              this.$toast("网络错误");
            }else{
              this.$toast(res.msg);
            }
          }
        })
        .catch(err => {
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
        });
      }
    },
  },
  mounted() {
    this.getLogLine();
  },
  created() {
    this.pid = parseInt(this.$route.params.hzid)
  }
};
</script>

<style lang="less">
#line {
  
  text-align: left;
  .van-nav-bar{
    .van-icon,.van-nav-bar__text {
    color: #404040;
    }
  }
  .main {
    background-color: #fff;
    .introduction {
      margin-left: 9px;
      text-align: left;
      h1 {
        display: inline;
        font-size: 15px;
      }
      div {
        width: 165px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 14px;
        &:first-child {
          margin-bottom: 8px;
        }
      }
    }
    .chart {
      padding: 10px;
      background-color: #fff;
      border-radius: 15px;
      // padding: 13px 15px;
      .title {
        // margin-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e9e7ea;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .canvas {
        width: 100%;
        height: 210px;
      }
    }
    
    ul{
      display: flex;
      align-items: center;
      li{
        margin: 0 2px;
        border-radius: 4px;
        padding: 3px 5px;
        border: 1px solid #ebedf0;
      }
      .active{
        color: #fff;
        background-color: #07c160;
        border: 1px solid #07c160;
      }
    }
  }
}
</style>
